<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>楼宇管理</el-breadcrumb-item>
      <el-breadcrumb-item>兰园</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片区域-->
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入名字或学号"
                    ref="inputRef"
                    v-model="dataList.query">
            <el-button slot="append"
                       icon="el-icon-search"
                       @click="serchStudentClick"></el-button>
          </el-input>
        </el-col>
        <!--
          <el-col :span="4">
          <el-button type="primary"
                     @click="dialogVisible = true">添加用户</el-button>
        </el-col>
        -->
      </el-row>
      <!--标签页-->
      <el-tabs v-model="activeName"
               @tab-click="getTowerList">
        <el-tab-pane :label="item.towerName"
                     v-for="item in lanyuan"
                     :key="item.towerId"
                     :name="item.towerId">
          <!--学生列表区域-->
          <el-table :data="studentList"
                    ref="towerRef"
                    highlight-current-row>
            <el-table-column type="index"
                             :index="indexMethod"></el-table-column>
            <el-table-column label="所在楼宇"
                             prop="tower"></el-table-column>
            <el-table-column label="宿舍号"
                             prop="dorm"></el-table-column>
            <el-table-column label="学号"
                             prop="studentNumber"></el-table-column>
            <el-table-column label="姓名"
                             prop="name"></el-table-column>
            <el-table-column label="性别"
                             prop="sex"></el-table-column>
            <el-table-column label="学院"
                             prop="college"></el-table-column>
            <el-table-column label="班级"
                             prop="class"></el-table-column>
            <el-table-column label="电话"
                             prop="tel"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-tooltip class="item"
                            effect="dark"
                            content="修改信息"
                            placement="top"
                            :open-delay="700"
                            :enterable="false">
                  <el-button type="primary"
                             icon="el-icon-edit"
                             circle
                             @click="editStudent(scope.row)"></el-button>
                </el-tooltip>
                <el-tooltip class="item"
                            effect="dark"
                            content="删除信息"
                            placement="top"
                            :open-delay="700"
                            :enterable="false">
                  <el-button type="danger"
                             icon="el-icon-delete"
                             circle
                             @click="isDelectClick(scope.row)"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!--分页区域-->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="dataList.pagenum"
                     :page-sizes="[1, 3, 5, 7]"
                     :page-size="dataList.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { towerInfoMixin } from 'commonjs/towerInfoMixin.js'
export default {
  name: 'Lanyuan',
  props: [''],
  data () {
    return {
      lanyuan: [
        {
          towerId: '1',
          towerName: '兰园1'
        }, {
          towerId: '2',
          towerName: '兰园2'
        }, {
          towerId: '3',
          towerName: '兰园3'
        }, {
          towerId: '4',
          towerName: '兰园4'
        }, {
          towerId: '5',
          towerName: '兰园5'
        }, {
          towerId: '6',
          towerName: '兰园6'
        }
      ],
      currTower: '兰园1'
    }
  },
  created () {
  },
  methods: {
    async getTowerList (tab, enven, tower = '兰园1') {
      // console.log(tab.label)
      const Tower = tower
      const { data: res } = await this.$axios.get('/tower/towerList', {
        params: {
          tower: tab !== undefined ? tab.label : Tower,
          pagenum: this.dataList.pagenum,
          pagesize: this.dataList.pagesize
        }
      })
      // console.log(res)
      // console.log(res.studentlist)
      if (res.meta.code !== 200) {
        return this.$message('获取列表失败')
      } else {
        this.studentList = res.studentlist
        this.total = res.total
        if (tab) {
          this.currTower = tab.label
        }
      }
    }
  },

  mixins: [towerInfoMixin]

}

</script>
<style lang='less' scoped>
</style>
